<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in listData" :key="index" @click="goDetail(item)">
				<view class="uni-media-list">
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{ item.title }}</view>
						<view class="uni-media-list-text-bottom">
							<text>{{ item.author }}</text>
						</view>
					</view>
					<text class="cell-more yticon icon-you"></text>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
var yzyTime = require('../../../common/util.js').yzyTime;
var dateUtils = require('../../../common/util.js').dateUtils;

export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			listData: [],
			last_id:1,
			reload: true,
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多'
			}
		};
	},
	onLoad() {
		this.getList();
	},
	onPullDownRefresh() {
	},
	onReachBottom() {
		this.status = 'more';
		this.getList();
	},
	methods: {
		getList() {
			let data = {
				//column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
			};
			if (this.last_id>1) {
				//说明已有数据，目前处于上拉加载
				this.status = 'loading';
				data.page = this.last_id;
				data._ = new Date().getTime() + '';
			}
			data.sort = 'weigh';
			data.limit = 10;
			uni.request({
				url: this.config.webUrl+'/api/index/articlelist',
				data: data,
				success: data => {
					//console.log(this.reload)
					if (data.data.code==1) {
						//console.log(data.data)
						let list = this.setTime(data.data.data);
						this.listData = this.reload ? list : this.listData.concat(list);
						this.reload = false;
						this.last_id = this.last_id+1;
						
						if(data.data.countpage<this.last_id){
							this.status = '';
						}
					}
				},
				fail: (data, code) => {
					//console.log('fail' + JSON.stringify(data));
				}
			});
		},
		goDetail(e) {  //跳转详情页面
			let detail = {
				author: e.author,
				avatar: e.avatar,
				yyname: e.yyname,
				id: e.id,
				updatetime: e.updatetime,
				title: e.title,
				htmlString:e.htmlString,
				
			};
			uni.navigateTo({
				url: '/pages/template/list2detail-detail/list2detail-detail?detailDate=' + encodeURIComponent(JSON.stringify(detail))
			});
		},
		setTime(items) {
			var newItems = [];
			items.forEach(e => {
				var str=e.avatar;
				if(str.indexOf("http") != -1){
					var urls=e.avatar;
				}else{
					var urls=this.config.imgUrl+e.avatar;
				}
				if(e.uname){
					var uname=e.uname;
				}else{
					var uname='云中医';
				}
				newItems.push({
					author: e.author,
					avatar: urls,
					id: e.id,
					uname: uname,
					updatetime:yzyTime(e.updatatime),
					title: e.title,
					htmlString:e.info,
				});
			});
			return newItems;
		}
	}
};
</script>

<style>
.banner {
	height: 360upx;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

.banner-img {
	width: 100%;
}
.cell-more{
		align-self: baseline;
		font-size:32upx;
		color:#909399;
		margin-left:10upx;
	}
.banner-title {
	max-height: 84upx;
	overflow: hidden;
	position: absolute;
	left: 30upx;
	bottom: 30upx;
	width: 90%;
	font-size: 32upx;
	font-weight: 400;
	line-height: 42upx;
	color: white;
	z-index: 11;
}

.uni-media-list-logo {
	width: 180upx;
	height: 140upx;
}

.uni-media-list-body {
	height: auto;
	justify-content: space-around;
}

.uni-media-list-text-top {
	height: 60upx;
	line-height: 60upx!important;
	font-size: 28upx;
	overflow: hidden;
}

.uni-media-list-text-bottom {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30upx;
		}
		&.m-t{
			margin-top: 16upx; 
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right:10upx;
		}
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16upx) scale(.84);
		}
	}
</style>
